<template>
    <div>
        <div class="add-btn">
            <el-button type="primary" @click="handleOpen">增加</el-button>
        </div>

        <el-dialog
            v-model="dialogFormVisible"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            title="增加分类"
            @close="handleClose"
        >
            <el-form :model="content">
                <el-form-item label="分类名称" :label-width="formLabelWidth">
                    <el-input v-model="name" autocomplete="off" />
                </el-form-item>
              
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                    >
                    <el-button type="primary" @click="handleAdd">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>

import { ElMessage  } from "element-plus";
import { defineEmits, ref } from "vue";
import { storeToRefs } from "pinia";
import {addType} from '../../../services/type';
const emits = defineEmits(["show"]);
const dialogFormVisible = ref(false);
const name = ref("");
const formLabelWidth = ref(100);
const handleOpen = () => {
    dialogFormVisible.value = true;
};
const handleClose = () => {

};
const handleAdd = async () => {
    await addType({name:name.value});
    emits("show");
    dialogFormVisible.value = false;
};
</script>
<style>
.add-btn {
    display: flex;
    justify-content: flex-end;
}
</style>
